<script lang="ts" setup name="couponScan">
import { Goods } from "@/api/interface";
import { deleteCorecmssalespromotion, getPartActivityList, getTraceInfoAPI, movableSwitch } from "@/api/modules/activity";
import { getCmssalesPromotionList } from "@/api/modules/coupon";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { onBeforeUpdate, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
// import { SendActivityNotice } from "@/api/modules/activity";
import { activityTypeList, statusList } from "@/utils/serviceDict";
import { Delete, EditPen, View } from "@element-plus/icons-vue";
import TraceActivity from "./components/TraceActivity.vue";
const route = useRoute();
const router = useRouter();
const ProTableRef = ref<ProTableInstance | null>(null);

const columns: ColumnProps<Goods.ResGoodsCategoryList>[] = [
  {
    type: "index",
    label: "序号",
    width: 60
  },
  {
    sortable: true,
    prop: "name",
    label: "活动名称",
    search: {
      el: "input"
    }
  },
  {
    sortable: true,
    prop: "typeName",
    label: "活动类型",
    enum: activityTypeList,
    isFilterEnum: false,
    search: {
      el: "select",
      key: "type"
    }
  },
  {
    sortable: true,
    prop: "statusName",
    label: "活动状态",
    isFilterEnum: false,
    width: 120,
    enum: statusList,
    search: {
      el: "select",
      key: "status"
    }
  },
  {
    sortable: true,
    prop: "code",
    label: "活动编码",
    width: 170
  },
  // {
  //   sortable: true,prop: "prioritySortId",
  //   label: "同一类型活动优先级",
  //   width: 170
  // },
  {
    sortable: true,
    prop: "creatTime",
    label: "创建时间"
  },
  {
    sortable: true,
    prop: "startTime",
    label: "活动开始时间"
  },
  {
    sortable: true,
    prop: "endTime",
    label: "活动结束时间"
  },
  // {
  //   sortable: true,prop: "index",
  //   label: "活动奖品"
  // },
  {
    prop: "operator",
    minWidth: 150,
    label: "操作"
  }
];

const onDel = async (id: number) => {
  await useHandleData(deleteCorecmssalespromotion, { id }, `删除【${id}】活动`);
  ProTableRef.value?.getTableList();
};

// 1:是扫码领券 5：弹窗活动 6：菜品推荐
const goDetail = (row: any, type: string) => {
  if (type === "view") {
    router.push(row.path + row.id + "&type=view");
    return;
  }
  // 修改
  router.push(row.path + row.id);
  // router.push(
  //   row.type === 1
  //     ? ""
  //     : row.type === 5
  //     ? "/marketing/popup-advertisement?activityId=" + row.id
  //     : row.type === 7
  //     ? "/marketing/product-exchange?id=" + row.id
  //     : "/marketing/product-recommend?id=" + row.id
  // );
};

onBeforeUpdate(() => {
  if (route.query.upList) {
    ProTableRef.value?.getTableList();
  }
});

// // 订阅消息
// async function sendMessage(e: any) {
//   ElMessageBox.confirm("确定要发送通知吗？")
//     .then(async res => {
//       if (res === "confirm") {
//         const { data, code } = (await SendActivityNotice({
//           data: e.id
//         })) as any;
//         if (code == 0) {
//           ElMessage.success("发送成功！");
//         }
//       }
//     })
//     .catch(err => {});

//   // e.id
// }

const traceActivityRef = ref<InstanceType<typeof TraceActivity> | null>(null);
const traceActivity = async (id: number) => {
  const res = await getTraceInfoAPI({ id });
  traceActivityRef.value!.acceptParams({
    title: "活动详情",
    traceActivityInfo: res.data,
    api: getPartActivityList,
    id
  });
};

const onMovableSwitch = async (id: number, type: string) => {
  await useHandleData(movableSwitch, { id }, `${type}【${id}】活动`);
  ProTableRef.value!.getTableList();
};
</script>

<template>
  <div class="table-box">
    <ProTable ref="ProTableRef" title="活动列表" row-key="id" :columns="columns" :request-api="getCmssalesPromotionList">
      <template #tableHeader>
        <el-button type="primary" @click="router.push('/marketing/create-activity')"> 创建活动 </el-button>
      </template>
      <template #startTime="{ row }">
        {{ row.startTime?.slice(0, 10) }}
      </template>

      <template #endTime="{ row }">
        {{ row.endTime?.slice(0, 10) }}
      </template>

      <template #operator="{ row }">
        <!-- <el-button link @click="sendMessage(row)"> 发送通知 </el-button> -->

        <el-button type="primary" v-if="row.status !== 1" :icon="EditPen" v-auth="'edit'" link @click="goDetail(row, 'edit')">
          编辑
        </el-button>
        <!-- <el-button  type="primary" v-auth="'view'" link> 查看 </el-button> -->
        <el-button type="primary" v-if="row.status === 1" v-auth="'stop'" link @click="onMovableSwitch(row.id, '停止')">
          停止
        </el-button>
        <el-button type="primary" v-if="row.status !== 1" v-auth="'stop'" link @click="onMovableSwitch(row.id, '开启')">
          开启
        </el-button>
        <el-button type="primary" v-if="row.status !== 1" :icon="Delete" v-auth="'delete'" link @click="onDel(row.id)">
          删除
        </el-button>
        <el-button type="primary" v-if="row.type === 4" link v-auth="'tracking'" @click="traceActivity(row.id)">
          活动追踪
        </el-button>
        <el-button type="primary" v-auth="'view'" link :icon="View" @click="goDetail(row, 'view')"> 查看 </el-button>
      </template>
    </ProTable>
    <TraceActivity ref="traceActivityRef"></TraceActivity>
  </div>
</template>

<style lang="scss" scoped></style>
